<template>
    <!-- 1.创建图表放置区域 -->
    <div id="l1_chart" style="height: 75%;"></div>
    <!-- <div id="container"></div> -->
  </template>
  
  
  // <script setup>
  // onMounted是vue3的生命周期函数之一，意思是在组件挂载之后再调用。
  import {onMounted} from "vue";
  // 1.导入折线图 使用import导入对应的图表
  import { Line } from "@antv/g2plot";
  
  // 2.创建图表对象
  // 创建一个绘制图表的函数，然后在我们div加载之后去调用函数， --window.onload = function()--生命周期
  
  
  //3.3图表的数据
  
  const data=[
       {
   "date": "3:54",
   "type": "value1",
        "value": 26
      },
      {
        "date": "3:54",
        "type": "value1",
        "value": 15
      },
      {
        "date": "3:53",
        "type": "value1",
        "value": 18
      },
      {
        "date": "3:53",
        "type": "value1",
        "value": 23
      },
    
      {
        "date": "3:52",
        "type": "value1",
        "value": 24
      },
      {
        "date": "3:52",
        "type": "value1",
        "value": 17
      },
    
      {
        "date": "3:51",
        "type": "value1",
        "value": 17
      },
      {
        "date": "3:51",
        "type": "value1",
        "value": 22
      },
  
    
      {
        "date": "3:50",
        "type": "value1",
        "value": 24
      },
      {
        "date": "3:50",
        "type": "value1",
        "value": 22
      },
  
      {
        "date": "3:49",
        "type": "value1",
        "value": 16
      },
      {
        "date": "3:49",
        "type": "value1",
        "value": 23
      },
    
      {
        "date": "3:48",
        "type": "value1",
        "value": 23
      },
      {
        "date": "3:48",
        "type": "value1",
        "value": 24
      },
  
      {
        "date": "3:47",
        "type": "value1",
        "value": 26
      },
      {
        "date": "3:47",
        "type": "value1",
        "value": 21
      },
      {
        "date": "3:46",
        "type": "value1",
        "value": 19
      },
      {
        "date": "3:46",
        "type": "value1",
        "value": 26
      },
      {
        "date": "3:45",
        "type": "value1",
        "value": 21
      },
      {
        "date": "3:45",
        "type": "value1",
        "value": 18
      },
    
    ]
  
  
  
  
  let options={
      data,
      xField: 'date',
      yField: 'value',
      xAxis:{
        label:{
          rotate:-45,
        },
      },
      yAxis: {
        label: {

  formatter: (v) => {
    const rangeStart = 0;
    const rangeEnd = 30;
    const interval = 10;
    if (v >= rangeStart && v <= rangeEnd) {
      const value = (v / interval).toFixed(0) * interval;
      return value;
    }
    return v;
  },
},
},
        seriesField: 'type',
      };
  


// 3.1初始化图表的方法
const init1Chart =()=>{
  let l1Line  = new Line(document.getElementById('l1_chart'),options)

  l1Line.render()
}
// 4 在onMounter()方法中调用初始化图表的方法

onMounted(()=>{
  init1Chart();
})

</script>


<style lang='scss' scoped>


</style>